import React from 'react';
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";

const PayChart = props => {
  const { x, y, data, useTool = false, style } = props
  return (
    <div style={style}>
       <Chart
          data={data}
          forceFit
          {...props}
        >
         <Coord type="theta" radius={0.75} />
          <Axis name="count" />
          <Tooltip
            showTitle={false}
            itemTpl="<li><span style=&quot;background-color:{color};&quot; class=&quot;g2-tooltip-marker&quot;></span>{name}: {value}</li>"
          />
          <Geom
            type="intervalStack"
            position="count"
            color="item"
            tooltip={[
              "item*count",
              (item, count) => {
                count = count * 100 + "%";
                return {
                  name: item,
                  value: count
                };
              }
            ]}
            style={{
              lineWidth: 1,
              stroke: "#fff"
            }}
          >
          <Label
            content="count"
            formatter={(val, item) => {
              return `${item.point.item}: ${val*100}%`;
            }}
          />
        </Geom>
      </Chart>
    </div>
  );
};

export default PayChart;